<!--
 * @Author: 45F
 * @LastEditors: qing
 * @Description: 登录页
 * @Date: 2019-07-19 13:48:38
 * @LastEditTime: 2019-10-22 11:10:36
 -->
<template>
  <div class="update-box update-password-container">
    <div class="update-box-inner">
      <div class="logo"><img src="../../assets/images/styleChange/login-header.png"/></div>
      <div class="update-title">用户密码修改</div>
      <a-form :form="editForm" @submit="handleSubmit">
        <a-form-item v-bind="formItemLayout" label="旧密码">
          <a-input v-decorator="['oldPassword', {rules: [{ required: true, message: '请输入您的旧密码密码!' }]}]" type="password" placeholder="请输入您的旧密码"> <a-icon slot="prefix" plaecholder="请输入您之前的密码" type="lock" style="color: #0177E4;font-size: 20px;"/></a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="新密码">
          <a-input v-decorator="[ 'password', { rules: [
            { required: true, message: '请输入您的新密码' },
            { validator: validateToNextPassword }
          ]}]" placeholder="请输入您的新密码" type="password"><a-icon slot="prefix" type="lock" style="color: #0177E4;font-size: 20px;"/></a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="确认密码">
          <a-input v-decorator="[ 'confirm', {
            rules: [ { required: true, message: '请确认您的密码', },
                  { validator: compareToFirstPassword },
                ],
              },
            ]" plaecholder="请再次输入您的新密码" type="password" @blur="handleConfirmBlur">
            <a-icon slot="prefix" type="lock" style="color: #0177E4;font-size: 20px;"/>
          </a-input>
        </a-form-item>
        <!-- <a-form-item v-if="isServerShow">
          <a-input size="large" v-decorator="['server', {rules: [{ required: true, message: '请输入服务器IP:端口!' }]}]" placeholder="服务器IP:端口"></a-input>
        </a-form-item> -->
        <a-form-item>
          <a-button class="updatePassword-btn" size="large" type="primary" html-type="submit" :loading="loading">确定</a-button>
          <a-button class="updatePassword-btn" size="large" :loading="loading" @click="cancelForm">取消</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { systemAccount } from '@/api'
import { removeUser, removeToken, removeRoutes } from '@/libs/util'

export default {
  data () {
    return {
      editForm: this.$form.createForm(this),
      loading: false,
      confirmDirty: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      }
      // isServerShow: true
    }
  },
  // mounted () {
  //   window.vue = this // 在浏览器console中调用vue内部方法,如：vue.serverShow(true)会显示服务器录入表单,vue.serverShow(false)隐藏
  // },
  methods: {
    handleConfirmBlur (e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    compareToFirstPassword (rule, value, callback) {
      const form = this.editForm
      if (value && value !== form.getFieldValue('password')) {
        callback ('您输入的两次密码不一样') // eslint-disable-line
      } else {
        callback () // eslint-disable-line
      }
    },
    validateToNextPassword (rule, value, callback) {
      const form = this.editForm
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true })
      }
      callback()
    },
    cancelForm () {
      this.$router.push({
        name: 'homePage'
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.editForm.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.loading = true
          let validataValue = {
            oldPassword: values.oldPassword,
            password: values.password
          }
          systemAccount.updateOldPassword(validataValue).then(res => {
            this.$message.success('密码更新成功')
            removeToken()
            removeUser()
            removeRoutes()
            this.$router.push({
              name: 'login'
            })
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style scope lang="less">
@import './index.less';
</style>
<style lang="less" scoped>
  .update-password-container /deep/ .ant-form-item-label{
    label{
      color: #ffffff
    }
  }
  .update-password-container /deep/ .ant-row.ant-form-item{
    width: 75%
  }
  .updatePassword-btn{
    margin-left: 25px;
    width: 100px !important;
    float: right;
  }
</style>
